<template>
  <div :class="[prefixCls]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
    <div :class="[prefixCls + '-rel']" ref="reference">
      <slot></slot>
    </div>
    <!-- <transition name="fade"> -->
      <div :class="[prefixCls + '-popper']" ref="popper" v-show="!disabled && (visible || always)">
        <div :class="[prefixCls + '-content']">
          <div :class="[prefixCls + '-arrow']"></div>
          <div :class="[prefixCls + '-inner']">
            <slot name="content">{{ content }}</slot>
          </div>
        </div>
      </div>
    <!-- </transition> -->
  </div>
</template>
<script>
import Popper from '../base/popper';
import {
  oneOf
} from '../../utils/assist';

const prefixCls = 'ivu-tooltip';

export default {
  name: 'Tooltip',
  mixins: [Popper],
  props: {
    placement: {
      validator(value) {
        return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
      },
      default: 'bottom'
    },
    content: {
      type: [String, Number],
      default: ''
    },
    delay: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    controlled: { // under this prop,Tooltip will not close when mouseleave
      type: Boolean,
      default: false
    },
    always: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      prefixCls: prefixCls
    };
  },
  methods: {
    handleShowPopper() {
      this.timeout = setTimeout(() => {
        this.visible = true;
      }, this.delay);
    },
    handleClosePopper() {
      clearTimeout(this.timeout);
      if (!this.controlled) {
        this.visible = false;
      }
    }
  }
};
</script>
